<template>
    <BPTable ref='tableRef' align='center' row-key='id' :columns='columns' :api='page' :buttons='buttons'>
        <template #account="{record}">
            <SecrecyField :record="record" field-name="account" :api="e => secrecySeeApi(record.id, e)" />
        </template>
    </BPTable>
    


</template>

<script lang='ts' setup>
    import { pageApi, exportApi, secrecySeeApi } from '@/api/logs/PortalLoginLog'
    import { ref } from 'vue'
    import { parseTime, recursionFn } from '@/utils'
    import { useI18nStore } from '@/store/i18n'
    import { useResourceStore } from '@/store/resource'
    import { useRouter } from 'vue-router'
    import SecrecyField from '@/components/SecrecyField.vue'


    const router = useRouter()
    const i18n = useI18nStore()
    const tableRef = ref()
    
    const buttons = ref<SearchButton[]>([
        {
            button : 'export',
            func : async(params:any) => {
                await exportApi(params)
                router.push("/logs/export")
            }
        }
    ])

    const columns = ref<Column[]>([
        {
            title : i18n.t('account'),
            dataIndex : 'account',
            align : 'center',
            inSearch : true,
        },

        {
            title : "时间",
            dataIndex : 'time',
            align : 'center',
            customRender({record}) {
                return parseTime(record.time)
            },
            inSearch : true,
            type : 'rangePicker',
            attrs : {
                showTime : true,
                valueFormat : 'X'
            }
        },


        {
            title : "登录方式",
            dataIndex : 'type',
            align : 'center',
        },


        {
            title : "ip",
            dataIndex : 'ip',
            align : 'center',
            inSearch : true
        },

        {
            title : "位置",
            dataIndex : 'location',
            align : 'center',
        },

        {
            title : "浏览器",
            width: 300,
            dataIndex : 'browser',
            align : 'center',
        },

    ])

    function page(params) {
        if(params.time) {
            params.startTime = params.time[0]
            params.endTime = params.time[1]
        }
        delete params.time
        return pageApi(params)
    }
</script>

<style lang='scss' module>
    .username{
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
</style>